<!DOCTYPE html>
<html lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="jquery-1.4.4.js" type="text/javascript"></script>
  <script type="text/javascript">
  
    // Wenn das Dokument geladen wird, wird hinter 
    // den Button (#getDataButton) die Funktion "getJSON" gelegt.
    // Diese ruft die PHP-Datei auf, die JSON zurückliefert.
    // Erst wenn das Ergebnis vollständig angekommen ist, wird die Funktion
    // 'generateTable' mit den JSON-Daten aufgerufen.
    
    $(document).ready(
      function(){
        $("#getDataButton").click(function() {
          $.getJSON("getJSONData.php",
            function(data) {
              generateTable(data);
            });
        });
      });

      
      // Erzeugt eine dynamische Tabelle aus JSON-Daten (data)
      function generateTable(data) {    
          var table = $("#gridtable");
          table.html("");  // Löschen der Tabelle
          table.append('<thead><tr></tr></thead>');
          var thead = $('thead tr', table);                                        
          
          // Erzeugen der Tabellen-Header
          for (var propertyName in $(data)[0]) {                
              thead.append('<th>' + propertyName + '</th>');
          }

          // Hinzufügen der Tabellenzeilen
          $(data).each(function(key, val) {
              table.append('<tr></tr>');
              var tr = $('tr:last', table);
              for (var propertyName in val) {
                  tr.append('<td>' + val[propertyName] + '</td>');
              }
          });
      }

   </script>
</head>

<body>
  <div id="file-area">
    <table id="gridtable"></table>
  </div>
  <div id="button-area">
    <input id="getDataButton" value="hole Daten..." type="button">
  </div>
</body>